<template>
	<view class="index">
		<view class="index-order">
			<view class="order-tab">
				<u-tabs :list="list1" lineWidth="30" lineColor="#1BA9BA" :activeStyle="{
				        color: '#303133',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left: 50rpx; padding-right: 30rpx; height: 68rpx;" @click="click">
				</u-tabs>
				<u-tabs-item class="order-tabs-item">
					<scroll-view class="order-scroll" scroll-y>


						<view class="order-card" v-for="(item,index) in newList" :key="index">
							<view class="order-card-left" @click="toDetail(item)">
								<h6>{{item.trainName}}</h6>
								<p>{{item.carriag}}车厢{{item.seatNumber}}号<span>{{item.booker}}</span> </p>
								<p>{{item.ticketDate}}</p>
							</view>
							<view class="order-card-right">
								<p class="order-card-price">￥{{item.priceMsg}}</p>
								<p :class="item.orderStyle">{{item.state}}</p>
								<view class="">
									<button class="order-card-button" @click="()=>{regDelelte(item.id)}">删除订单</button>
								</view>
							</view>

						</view>
						<view>
							<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
								<view class="order-popup">
									<p>确定要删除订单吗🙂</p>
									<view class="order-popup-Btn">
										<button class="order-popup-leftBtn" type="primary" @click="close">取消</button>
										<button class="order-popup-rightBtn" type="warn"
											@click="()=>{deleteOrder()}">确定</button>
									</view>
								</view>
							</u-popup>

						</view>
					</scroll-view>

				</u-tabs-item>

			</view>

		</view>
	</view>




</template>

<script>
	import form from '../../uni_modules/uview-ui/libs/config/props/form';
	let list = require('./orderList.json')
	export default {
		data() {
			return {
				show: false,
				show2: false,
				qjid: 1,
				list: list,
				newList: [],
				list1: [{
					name: '全部',
					key: 'title1'
				}, {
					name: '待出行',
					key: 'title2'
				}, {
					name: '待支付',
					key: 'title3'
				}, {
					name: '退款/已取消',
					key: 'title4'
				}]
			}
		},
		methods: {
			toDetail(item) {
				let id = item.id;
				console.log(id)
				if (item.state == '待支付') {
					uni.navigateTo({
						url: '/pages/pay/pay'
					})
				} else {
					uni.navigateTo({
						url: "/pages/Order details/Order details?id=" + id
					});
				}

			},
			click(itemList) {
				if (itemList.name == '全部') {
					this.newList = this.list
				} else {
					this.newList = this.list.filter(item => {
						return item.state.includes(itemList.name == '退款/已取消' ? '取消' : itemList.name)
					})
				}

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			deleteOrder() {
				this.show = false;
				this.show2 = true;
				this.delead(this.qjid)

			},
			regDelelte(id) {
				this.qjid = id
				this.show = true;

			},
			delead(id) {
				let index; //定义一个变量，当作索引
				for (let i = 0; i < this.newList.length; i++) { //遍历数组，这里的数组是你定义过的数组=数据，所以用this.在方法里
					if (this.newList[i].id == id) { //让数组遍历出来的id和这里的形参id（其实就是真实的id）进行比较
						index = i; //相等，返回true，我们让这时的i(索引)赋值给你定义的index这个变量
					}
				}
				this.newList.splice(index, 1);
				this.show2 = !this.show2;


			}

		},
		mounted() {
			this.newList = this.list
		}
	}
</script>

<style scoped lang="scss">
	.index {
		width: 100%;
		height: 80vh;
	}

	.index-order {
		width: 100%;
		height: 80vh;
	}

	.order-scroll {
		height: 93.5vh;
	}

	.order-tab {
		width: 100%;
		height: 50vh;
		background-color: #fafafa;
	}

	.order-tabs-item {
		width: 100%;
	}

	.order-card {
		width: 680rpx;
		height: 240rpx;
		margin-left: 34rpx;
		margin-top: 40rpx;
		background-color: #fff;
		border: 2rpx solid #eeeeee;
		border-radius: 20rpx;
		display: flex;


		.order-card-left {
			padding-top: 20rpx;
			padding-left: 20rpx;

			h6 {
				font-size: 32rpx;
				font-weight: 600;

			}

			p {
				font-size: 20rpx;
				color: #80879B;
				margin-top: 20rpx;

				span {
					margin-left: 20rpx;
				}
			}
		}

		.order-card-right {
			padding-top: 20rpx;
			padding-left: 20rpx;
			position: relative;

			.order-card-price {
				color: #FF8D41;
				font-size: 32rpx;
				font-weight: 600;
				position: absolute;
				right: -80rpx;
			}

			.red {
				font-size: 24rpx;
				position: absolute;
				right: -80rpx;
				top: 80rpx;
				color: red;
			}

			.green {
				font-size: 24rpx;
				position: absolute;
				right: -80rpx;
				top: 80rpx;
				color: green;
			}

			.black {
				font-size: 24rpx;
				position: absolute;
				right: -80rpx;
				top: 80rpx;
			}

			.order-card-state {
				font-size: 24rpx;
				position: absolute;
				right: -80rpx;
				top: 80rpx
			}

			.order-card-button {
				width: 140rpx;
				height: 60rpx;
				font-size: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 40rpx;
				line-height: 60rpx;
				background-color: #fafafa;
				position: relative;
				top: 130rpx;
				left: 90rpx;
			}
		}
	}

	.order-popup {
		width: 400rpx;
		height: 280rpx;

		p {
			margin-left: 78rpx;
			margin-top: 30rpx;
			margin-bottom: 60rpx;
		}

		.order-popup-Btn {
			display: flex;


			button {
				width: 150rpx;
				height: 80rpx;
				font-size: 28rpx;
			}
		}


	}
</style>